<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        //选项卡
        window.onload = function () {
            let app = new Vue({
                el: "#app",
                data: {
                    now: 0,
                    arr: ["选项卡一", "选项卡二", "选项卡三", "选项卡四"]
                },
                methods: {
                    change(index) {
                        this.now = index;
                    }
                }
            })
        }
    </script>
    <style>
        #app div {
            width: 100px;
            height: 30px;
            background: #ccc;
            text-align: center;
            line-height: 30px;
            float: left;
            margin-right: 10px;
            cursor: pointer;
        }

        #app .active {
            background: red;
        }

        #app .content {
            clear: both;
            width: 300px;
            height: 300px;
            background: #ccc;
            text-align: center;
            line-height: 300px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-for="(item,index) in arr" :key="index" @click="change(index)" :class="{active:now==index}">{{item}}</div>
        <div class="content">
            <div v-show="now==0">内容一</div>
            <div v-show="now==1">内容二</div>
            <div v-show="now==2">内容三</div>
            <div v-show="now==3">内容四</div>
        </div>


    </div>

</body>

</html>